<template>
  <div>
    <!-- 账户信息 -->
    <div class="w-943 br-12 c-white balance_box">
      <div class="pt-28 pb-40 pl-16 pr-46">
        <div class="fs-18 lh-20 fw-600 balance_title">总可用余额</div>
        <div class="d-flex mt-20 justify-content-between">
          <div class="fs-56 lh-60 fw-600 ff-rb">${{ whole_total_money }}</div>
        </div>
      </div>
    </div>
    <el-card class="box-card pt-20">
      <el-row>
        <el-form
          ref="form"
          :inline="true"
          :model="queryForm"
          @submit.native.prevent
        >
          <el-form-item prop="createTime">
            <el-date-picker
              v-model="queryForm.createTime"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="创建时间"
              end-placeholder="创建时间"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="card_id">
            <el-input v-model="queryForm.card_id" placeholder="请输入交易ID" />
          </el-form-item>
          <el-form-item prop="label">
            <el-select
              v-model="queryForm.coin"
              placeholder="请选择币种"
              clearable
            >
              <el-option
                v-for="item in coinList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="type">
            <el-select v-model="queryForm.type" placeholder="请选择交易类型">
              <el-option
                v-for="item in moneyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="status">
            <el-select v-model="queryForm.status" placeholder="请选择交易状态">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              native-type="submit"
              type="purple"
              @click="handleQuery"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-search"
              native-type="submit"
              type="default"
              @click="resetList"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
        <div style="display: flex; justify-content: space-between">
          <div>
            <el-button
              plain
              icon="el-icon-download"
              native-type="submit"
              type="primary"
            >
              导出卡数据
            </el-button>
          </div>
          <el-popover popper-class="custom-table-checkbox" trigger="hover">
            <el-checkbox-group v-model="checkList">
              <vab-draggable v-bind="dragOptions" :list="columns">
                <div v-for="(item, index) in columns" :key="item + index">
                  <vab-icon icon="drag-drop-line" style="margin-right: 8px" />
                  <el-checkbox
                    :disabled="item.disableCheck === true"
                    :label="item.label"
                  >
                    {{ item.label }}
                  </el-checkbox>
                </div>
              </vab-draggable>
            </el-checkbox-group>
            <template #reference>
              <el-button
                icon="el-icon-setting"
                style="margin: 0 0 10px 0 !important"
                type="primary"
                plain
              >
                配置
              </el-button>
            </template>
          </el-popover>
        </div>
        <el-table
          ref="tableSort"
          v-loading="listLoading"
          :border="border"
          :data="list"
          :height="height"
          :size="lineHeight"
          :stripe="stripe"
          @selection-change="setSelectRows"
        >
          <!-- <el-table-column align="center" type="selection" width="55" />
          <el-table-column
            align="center"
            label="序号"
            show-overflow-tooltip
            width="95"
          >
            <template #default="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column> -->
          <el-table-column
            v-for="(item, index) in finallyColumns"
            :key="index"
            align="center"
            :label="item.label"
            :prop="item.prop"
            :sortable="item.sortable"
            :width="item.width"
          >
            <template #default="{ row }">
              <span>{{ row[item.prop] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            show-overflow-tooltip
            width="80"
          >
            <template #default="{ row }">
              <el-button type="text" @click="handleEdit(row)">详情</el-button>
            </template>
          </el-table-column>
          <template #empty>
            <el-image
              class="vab-data-empty"
              :src="require('@/assets/empty_images/data_empty.png')"
            />
          </template>
        </el-table>
        <el-pagination
          background
          :current-page="queryForm.page"
          :layout="layout"
          :page-size="queryForm.limit"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import { doDelete } from '@/api/table'
  import {
    getLabelList,
    getUserMoneyList,
    getMoneyTypeList,
    getWholenameList,
    getAllCardStatus,
  } from '@/api/card'
  import VabDraggable from 'vuedraggable'
  import { mapGetters } from 'vuex'
  import { toThousands } from '@/utils'

  export default {
    name: 'PrepaidCard',
    components: {
      VabDraggable,
    },
    data() {
      return {
        whole_total_money: null,
        cardList: null,
        border: true,
        height: this.$baseTableHeight(1),
        stripe: false,
        lineHeight: 'medium',
        checkList: [
          '创建时间',
          '交易ID',
          '交易描述',
          '交易类型',
          '币种',
          '交易金额',
          '手续费',
          '交易状态',
          '操作',
        ],
        columns: [
          {
            label: '创建时间',
            width: 'auto',
            prop: 'createtime_text',
          },
          {
            label: '交易ID',
            width: 'auto',
            prop: 'id',
          },
          {
            label: '交易描述',
            width: 'auto',
            prop: 'memo',
          },
          {
            label: '交易类型',
            width: 'auto',
            prop: 'type_text',
          },
          {
            label: '币种',
            width: 'auto',
            prop: 'coin',
          },
          {
            label: '交易金额',
            width: 'auto',
            prop: 'amount',
          },
          {
            label: '手续费',
            width: 'auto',
            prop: 'service_fee',
          },
          {
            label: '交易状态',
            width: 'auto',
            prop: 'api_result_text',
          },
        ],
        list: [],
        listLoading: true,
        layout: '->,total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          page: 1,
          limit: 10,
          createTime: '',
          trade_id: '',
          last_no: '',
          type: '',
          status: '',
          label: '',
          wholename: '',
          card_id: '',
        },
        coinList: [{ value: 'USD', label: 'USD' }],
        typeList: null,
        labelList: null,
        moneyList: null,
        statusList: null,
        wholeNameList: null,
        pickerOptions: {
          disabledDate(date) {
            return date.getTime() > Date.now()
          },
        },
      }
    },
    computed: {
      dragOptions() {
        return {
          animation: 600,
          group: 'description',
        }
      },
      finallyColumns() {
        return this.columns.filter((item) =>
          this.checkList.includes(item.label)
        )
      },
      ...mapGetters({
        infoDetail: 'user/infoDetail',
      }),
    },
    created() {
      this.whole_total_money = toThousands(this.infoDetail.whole_total_money)
      this.getMoneyType()
      this.getlabelList()
      this.getAllStatus()
      this.getWholeNameList()
      this.fetchData()
    },
    methods: {
      setSelectRows(val) {
        this.selectRows = val
      },
      handleAdd() {
        this.$refs['edit'].showEdit()
      },
      handleEdit(row) {
        this.$refs['edit'].showEdit(row)
      },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            this.$baseMessage(msg, 'success', 'vab-hey-message-success')
            await this.fetchData()
          })
        } else {
          if (this.selectRows.length > 0) {
            const ids = this.selectRows.map((item) => item.id).join()
            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids: ids })
              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
              await this.fetchData()
            })
          } else {
            this.$baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
          }
        }
      },
      handleSizeChange(val) {
        this.queryForm.limit = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.fetchData()
      },
      handleQuery() {
        this.queryForm.page = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        this.queryForm = Object.assign(this.queryForm, {
          createtime: this.queryForm.createTime
            ? this.queryForm.createTime.join('~')
            : '',
        })
        const {
          data: { data, total },
        } = await getUserMoneyList(this.queryForm)
        this.list = data
        this.total = total
        this.listLoading = false
      },
      async getAllStatus() {
        const { data } = await getAllCardStatus({})
        if (data) {
          let arr = []
          for (let i in data) {
            arr.push({
              value: i,
              label: data[i],
            })
          }
          this.statusList = arr
        }
      },
      async getlabelList() {
        const {
          data: { data },
        } = await getLabelList()
        if (data) {
          this.labelList =
            data
              .map((item) => ({
                label: item.label,
                value: item.label,
              }))
              .filter((item) => {
                return item.label && item.label != null
              }) || []
        }
      },
      async getWholeNameList() {
        const {
          data: { data },
        } = await getWholenameList()
        if (data) {
          this.wholeNameList =
            data
              .map((item) => ({
                label: item.wholename,
                value: item.wholename,
              }))
              .filter((item) => {
                return item.label && item.label != null
              }) || []
        }
      },
      async getMoneyType() {
        const { data } = await getMoneyTypeList()
        if (data) {
          let arr = []
          for (let i in data) {
            arr.push({
              value: i,
              label: data[i],
            })
          }
          this.moneyList = arr
        }
      },
      handleChangeHeader(val) {
        this.queryForm.status = this.moneyList[val.index - 0].num
        this.fetchData()
      },
      resetList() {
        this.queryForm.page = 1
        this.$refs.form.resetFields()
        this.fetchData()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .custom-table-container {
    :deep() {
      i {
        cursor: pointer;
      }
    }

    .stripe-panel,
    .border-panel {
      margin: 0 10px #{$base-margin/2} 10px !important;
    }
  }
  .balance_box {
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
    background-image: url('../../../assets/image/home/balance_bg.png');
    background-repeat: repeat-x;
    background-position: left;
    background-size: 100%;
  }
  .balance_title {
    position: relative;
    padding-left: 10px;
    border-left: 4px solid #fff;
  }
  .chongzhi_btn {
    width: 203px;
    height: 56px;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 56rpx;
    color: #6b1ce9;
    text-align: center;
    background: #ffffff;
    border-radius: 28px;
  }
  .custom-table-checkbox {
    [class*='ri'] {
      vertical-align: -2.5px;
      cursor: pointer;
    }

    .el-checkbox {
      margin: 5px 0 5px 8px;
    }
  }
  .horoscope-list {
    padding: 0 10px;
    margin-bottom: 20px;
    border-left: 4px solid #6b1ce9;
    i {
      margin-left: 5px;
      font-size: 18px;
      font-weight: 700;
      color: #409eff;
      cursor: pointer;
    }
  }
</style>
